<template>
	<div class="detail-container">
    <div class="detail-header">
      <div class="detail-header-con">
        <div class="status">{{order_detail.status_name}}</div>
        <div class="create-time">创建时间：{{order_detail.create_time}}</div>
      </div>
    </div>
    <div class="detail-con">
      <div class="item-block address" v-if="order_detail.address_id>0">
        <div class="left"></div>
        <div class="right">
          <div class="name">{{order_detail.receiver_name}} {{order_detail.receiver_mobile}}</div>
          <div class="addr">{{order_detail.receiver_address}}</div>
          <div class="addr" v-if="order_detail.id_card">(身份证号：{{order_detail.id_card}})</div>
        </div>
      </div>
      <div class="item-block order-goods">
        <ul>
          <li v-for="(goods,index) in order_detail.item"
              :key="index"
              class="goods-li">
            <section class="order-goods-img">
              <a @click="openLink(goods.link)">
                <img :src="goods.file_path+'160x160'" width="80" height="80" v-if="goods.is_compress==1"/>
                <img :src="goods.file_path" width="80" height="80" v-else/>
              </a>
            </section>
            <section class="order-goods-infor g-flex">
              <div class="left">
                <a href="javascript:;" class="goods-title">{{goods.title}}</a>
                <p class="goods-props" v-if="goods.property">{{goods.property}}</p>
                <p class="price fl" v-if="order_detail.pay_type && order_detail.pay_type==5">&dollar; <em>{{goods.price}}</em>}</p>
                <span class="price" v-else v-html="scaleGoodsPriceFn(goods.price)"></span>
              </div>
              <div class="right">
                <span class="num fr"><i>x</i>{{goods.num}}</span>
              </div>
            </section>
          </li>
        </ul>
      </div>
      <div class="item-block">
        <div class="price-con">
          <div class="label">商品小计</div>
          <div class="line-detail">&yen;{{order_detail.total_price}}</div>
        </div>
        <div class="price-con" v-if="order_detail.full_subtract_id>0">
          <div class="label">满减优惠</div>
          <div class="line-detail">{{order_detail.subtract_msg}}</div>
        </div>

        <!-- <div class="price-con" v-if="order_detail.first_remission_price>0">
          <div class="label">首单立减</div>
          <div class="line-detail">&yen;{{order_detail.first_remission_price}}</div>
        </div> -->
        <!-- <div class="price-con" v-if="order_detail.user_coupon_title">
          <div class="label">满减优惠</div>
          <div class="line-detail">&yen;</div>
        </div> -->
        <div class="price-con">
          <div class="label">运费</div>
          <div class="line-detail" v-if="order_detail.post_fee>0">&yen;{{order_detail.post_fee}}</div>
          <div class="line-detail" v-else>包邮</div>
        </div>
        <!-- 税费 -->
        <div class="price-con" v-if="order_detail.tax_fee>0">
          <div class="label">税费</div>
          <div class="line-detail">&yen;{{order_detail.tax_fee}}</div>
        </div>
        <div class="price-con" v-if="order_detail.user_coupon_title">
          <div class="label">使用优惠券</div>
          <div class="line-detail">-&yen;{{order_detail.user_coupon_value}}</div>
        </div>
        <!-- <div class="price-con" v-if="order_detail.coupon_code_fee>0">
          <div class="label">使用优惠码</div>
          <div class="line-detail">-&yen;{{order_detail.coupon_code_fee}}</div>
        </div>
        <div class="price-con" v-if="order_detail.coupon_repurchase_price>0">
          <div class="label">复购优惠</div>
          <div class="line-detail">-&yen;{{order_detail.coupon_repurchase_price}}</div>
        </div> -->
        <div class="price-con" v-if="order_detail.adjust_fee>0">
          <div class="label">卖家调整金额</div>
          <div class="line-detail">
            <!-- <span v-if="order_detail.pay_type==5">&dollar;{{order_detail.adjust_fee}}</span> -->
            <span>&yen;{{order_detail.adjust_fee}}</span>
          </div>
          <!-- <div v-else>
            <span v-if="order_detail.pay_type==5">-&dollar;{{order_detail.adjust_fee}}</span>
            <span v-else>-&yen;{{order_detail.adjust_fee}}</span>
          </div> -->
        </div>
        <div class="price-con" v-if="order_detail.point_fee>0">
          <div class="label">积分抵现</div>
          <div class="line-detail" v-if="order_detail.pay_type==5">&dollar;{{order_detail.point_fee}}</div>
          <div class="line-detail" v-else>&yen;{{order_detail.point_fee}}</div>
        </div>
        <!-- <div class="price-con" v-if="order_detail.virtual_currency_fee>0">
          <div class="label">虚拟币抵现</div>
          <div class="line-detail" v-if="order_detail.pay_type==5">&dollar;{{order_detail.virtual_currency_fee}}</div>
          <div class="line-detail" v-else>&yen;{{order_detail.virtual_currency_fee}}</div>
        </div> -->
        <div class="total-price">实付款：<span class="price" v-html="scaleGoodsPriceFn(order_detail.payment)"></span></div>
      </div>
      <div class="item-block item-block2">
        <div class="title">订单信息</div>
        <div class="line-con">
          <div class="label">订单编号</div>
          <!-- <div class="line-detail">{{order_detail.order_no}}<span class="copy" @click="copyOrderId(order_detail.order_no,$event)">复制</span></div>           -->
          <div class="line-detail">{{order_detail.order_no}}<van-button round hairline="false" class="copy" @click="copyOrderId(order_detail.order_no,$event)">复制</van-button></div>

        </div>
        <div class="line-con">
          <div class="label">付款方式</div>
          <div class="line-detail" v-if="order_detail.payment==order_detail.balance_fee">余额支付</div>
          <div class="line-detail" v-else>{{order_detail.pay_type_name}}
            <span v-if="order_detail.balance_fee!=0">(余额支付：{{order_detail.balance_fee}})</span>
          </div>
          <div class="line-detail" v-if="order_detail.peer_pay_no">
            <span v-for="(peer,index) in order_detail.peer_pay_no" :key="index">{{peer.user_id}},单号:{{peer.peer_order_no}}</span>
          </div>
          <div class="line-detail" v-if="order_detail.store_gathering_id>0">门店收款码订单
            <span v-if="order_detail.is_allocation">（已分账，分账比例 {{order_detail.allocation_log.allocation_ratio}}%，分账金额 {{order_detail.allocation_log.allocation_payment}}）</span>
          </div>
        </div>
        <div class="line-con" v-if="order_detail.store_gathering_id!=0">
          <div class="label">收款门店</div>
          <div class="line-detail">{{order_detail.store_gathering_store_name}}</div>
        </div>
        <div class="line-con">
          <div class="label">配送方式</div>
          <div class="line-detail" v-if="order_detail.shipping_type==5">门店配送（{{order_detail.self_address}}）</div>
          <div class="line-detail" v-else-if="order_detail.is_self_take || order_detail.self_address_id">自提（{{order_detail.self_address}}）</div>
          <div class="line-detail" v-else-if="!order_detail.address_id">免物流</div>
          <div class="line-detail" v-else>{{order_detail.shipping_type_name}}</div>
        </div>
        <div class="line-con" v-if="order_detail.store_reservation">
          <div class="label">预约时间</div>
          <div class="line-detail">{{order_detail.store_reservation.start_time}}~{{order_detail.store_reservation.end_time}}</div>
        </div>
        <div class="line-con">
          <div class="label">会员ID</div>
          <div class="line-detail">{{order_detail.user_id}}</div>
        </div>
        <div class="line-con" v-if="order_detail.nickname">
          <div class="label">会员昵称</div>
          <div class="line-detail">{{order_detail.nickname}}</div>
        </div>
        <div class="line-con" v-if="order_detail.mobile">
          <div class="label">手机号</div>
          <div class="line-detail">{{order_detail.mobile}}</div>
        </div>
        <div class="line-con" v-if="order_detail.real_name">
          <div class="label">会员姓名</div>
          <div class="line-detail">{{order_detail.real_name}}</div>
        </div>
        <div class="line-con" v-if="order_detail.message">
          <div class="label">买家留言</div>
          <div class="line-detail">{{order_detail.message}}</div>
        </div>
        <div class="line-con" v-if="order_detail.remark">
          <div class="label">卖家备注</div>
          <div class="line-detail">{{order_detail.remark}}</div>
        </div>
      </div>
      <div class="item-block item-block2">
        <div class="title">佣金信息</div>
        <div class="line-con" v-if="commission.superior_user_id>0">
          <div class="label">一级分销商</div>
          <div class="line-detail">{{commission.superior_nickname}} &yen;{{commission.superior_commission}}</div>
        </div>
        <div class="line-con" v-if="commission.top_user_id>0">
          <div class="label">二级分销商</div>
          <div class="line-detail">{{commission.top_nickname}} &yen;{{commission.top_commission}}</div>
        </div>
        <div class="line-con" v-if="commission.three_user_id>0 && has_three_level">
          <div class="label">三级分销商</div>
          <div class="line-detail">{{commission.three_nickname}} &yen;{{commission.three_commission}}</div>
        </div>
        <div class="line-con" v-if="commission.superior_dls_nickname">
          <div class="label">{{order_detail.dls_rank_name_one}}</div>
          <div class="line-detail">{{commission.superior_dls_nickname}} &yen;{{commission.superior_dls_commission}}</div>
        </div>
        <div class="line-con" v-if="commission.top_dls_nickname">
          <div class="label">{{order_detail.dls_rank_name_two}}</div>
          <div class="line-detail">{{commission.top_dls_nickname}} &yen;{{commission.top_dls_commission}}</div>
        </div>
        <div class="line-con" v-if="commission.three_dls_nickname">
          <div class="label">{{order_detail.dls_rank_name_three}}</div>
          <div class="line-detail">{{commission.three_dls_nickname}} &yen;{{commission.three_dls_commission}}</div>
        </div>
        <div class="line-con" v-if="commission.store_id>0">
          <div class="label">门店佣金</div>
          <div class="line-detail">{{commission.store_nickname}} &yen;{{commission.store_commission}}</div>
        </div>
        <div class="line-con" v-if="commission.staff_id>0">
          <div class="label">员工佣金</div>
          <div class="line-detail">{{commission.staff_nickname}} &yen;{{commission.staff_commission}}</div>
        </div>
        <div class="line-con" v-if="commission.store_reward_user">
          <div class="label">门店奖励</div>
          <div class="line-detail">{{commission.store_reward_nickname}} &yen;{{commission.store_reward}}</div>
        </div>
      </div>
      <div class="item-block item-block2" v-if="order_verify_log && order_verify_log.length>0">
        <div class="title">核销记录</div>
        <div class="order-verify-log" v-for="(item,index) in order_verify_log" :key="index">
          <div class="line-con">
            <div class="label">核销时间</div>
            <div class="line-detail">{{item.input_time}}</div>
          </div>
          <div class="line-con">
            <div class="label">核销商品</div>
            <div class="line-detail" v-html="item.item_name"></div>
          </div>
          <div class="line-con">
            <div class="label">核销数量</div>
            <div class="line-detail">{{item.verify_num}}</div>
          </div>
          <div class="line-con">
            <div class="label">剩余数量</div>
            <div class="line-detail">{{item.surplus_num}}</div>
          </div>
          <div class="line-con" v-if="item.handle_user_id && item.handle_user_id > 0">
            <div class="label">核销人</div>
            <div class="line-detail">{{item.handle_user_name}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { scaleGoodsPrice } from '@/utils/index.js'
import { openPage} from '@/utils/utils'
import { storeOrderDetail } from '@/api/user/store/storeApi'
import Vue from 'vue'

export default Vue.extend({
  name: 'index',
  components: {

  },
  data() {
    return {
      order_id: '',
      order_detail: {},
      commission: {},
      order_verify_log: [],
      has_three_level: false
    }
  },
  methods: {
    openLink(link) {
      openPage(link)
    },
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    // 复制
    copyOrderId(text, e) {
      // TODO 小程序复制使用wx的复制版
        wx.setClipboardData({
          data: text,
          success (res) {
            wx.getClipboardData({
              success(res) {
                wx.showToast({
                  title: '复制成功',
                  icon: 'none',
                });
              }
            })
          }
        })
    },
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)

      const data = {
        order_id: this.order_id
      }
      storeOrderDetail(data).then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.order_detail = resData.order_detail
          this.commission = resData.commission
          this.order_verify_log = resData.order_verify_log
          this.has_three_level = resData.has_three_level
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },
  created() {
    const query = this.$route.query
    this.order_id = query.id
    this.init()
  }
})
</script>

<style lang="scss">
@import "src/styles/order/detail";
</style>
